import React from 'react';
import classnames from 'classnames';
import { observer } from 'mobx-react';
import TRANSITION_CONST from 'common/const/transition';
import Portal from 'components/portal';
import Select from 'components/config/select';
import Input from 'components/config/input';
import Switch from 'components/config/switch';
import css from './index.less';

@observer
export default class Transitions extends React.Component {

  portalTop = 0;
  portalLeft = 0;

  constructor(props) {
    super(props);
    this.state = {
      portalOpen: false,
      transitionType: null
    };
  }

  checkTransition(transitionType) { // json row
    const { left, top } = this.refs[`node_${transitionType.key}`].getBoundingClientRect();
    console.log(this.refs[`node_${transitionType.key}`].getBoundingClientRect());
    this.portalTop = top;
    this.portalLeft = left;
    this.setState({
      portalOpen: true,
      transitionType,
    });
  }

  renderRows(row) {
    const { mod } = this.props;
    const props = {
      className: classnames(css.cell, css.value),
      onClick: this.checkTransition.bind(this, row),
      ref: `node_${row.key}`
    };
    let value = '';
    row.options.forEach(option => {
      if (option.key === mod[row.key].key) {
        value = option.label;
      }
    });
    return (
      <div key={row.key} className={css.transRowBox}>
        <div className={css.transRow}>
          <div className={classnames(css.cell, css.type)}>{row.label}</div>
          <div {...props}>{value}</div>
        </div>
      </div>
    );
  }

  renderPortal() {
    const { portalOpen, transitionType } = this.state;
    const { portalTop, portalLeft } = this;
    const portalProps = {
      portalTrigger: this.refs.portalTrigger,
      isOpen: portalOpen,
      closeOnEsc: true,
      closeOnOutsideClick: true,
      onClose: () => {
        this.setState({
          portalOpen: false
        });
      },
    };
    return (
      <Portal {...portalProps}>
        <div
          className={css.popover}
          style={{
            top: `${portalTop + 30}px`,
            left: `${portalLeft}px`,
          }}
        >
          {
            transitionType
              ? this.renderPopover()
              : <div>渲染失败</div>
          }
        </div>
      </Portal>
    );
  }

  renderPopover() {
    const { mod } = this.props;
    const { transitionType } = this.state;
    console.log(transitionType, mod);
    const props = {
      label: '动画类型',
      options: transitionType.options,
      value: mod[transitionType.key].key,
      onChange: val => {
        mod[transitionType.key].key = val;
      }
    };
    return (
      <div className={css.typeBox}>
        <Select {...props}/>
        {this.renderAttr()}
      </div>
    );
  }

  renderAttr() {
    const { mod } = this.props;
    const { transitionType } = this.state;

    return (
      <div>
        {
          transitionType.attr.map(item => {
            const props = {
              key: item.key,
              style: {
                padding: '5px 0'
              }
            };
            const inputProps = {
              type: 'number',
              label: item.label,
              value: mod[transitionType.key][item.key],
              unit: item.key === 'times' ? ' ' : 's',
              min: item.min,
              onChange: val => {
                mod[transitionType.key][item.key] = parseFloat(val);
              }
            };

            if (item.key === 'times') {
              const switchProps = {
                label: '循环播放',
                checked: mod[transitionType.key].times === 'infinite',
                onChange: () => {
                  const times = mod[transitionType.key].times;
                  if (times === 'infinite') mod[transitionType.key][item.key] = 1;
                  else mod[transitionType.key][item.key] = 'infinite';
                }
              };
              return ([
                <div key="switch">
                  <Switch {...switchProps}/>
                </div>,
                Number(mod[transitionType.key].times) >= 0 &&
                <div {...props}>
                  <Input {...inputProps}/>
                </div>
              ]);
            }
            return (
              <div {...props}>
                <Input {...inputProps}/>
              </div>
            );
          })
        }
      </div>
    );
  }

  render() {
    const { mod } = this.props;
    if (mod.originType !== 'Element') {
      return (
        <div className={css.nonsupport}>
          该元素不支持预制动画
        </div>
      );
    }
    return (
      <div className={css.transition} ref="portalTrigger">
        {TRANSITION_CONST.map(item => this.renderRows(item))}
        {this.renderPortal()}
      </div>
    );
  }
}
